<template>
    <h2>series同图例长度一样的方式-tooltip.trigger='item'</h2>
    <div class="chart" ref="chart"></div>
</template>

<script setup>
import * as echarts from 'echarts'
import { ref, onMounted } from 'vue';
let chart = ref();
const initChart = () => {
    let chartDom = chart.value;
    let myChart = echarts.init(chartDom);
    let res = [
        {
            "basicinfoCreditcode": null,
            "province": "北京",
            "provinceCode": "110000",
            "num": 0,
            "orgId": null,
            "orgNum": 0,
            "selfNum": 0,
            "noSelfNum": 0,
            "isSelf": 0
        },
        {
            "basicinfoCreditcode": null,
            "province": "天津",
            "provinceCode": "120000",
            "num": 0,
            "orgId": null,
            "orgNum": 0,
            "selfNum": 0,
            "noSelfNum": 0,
            "isSelf": 0
        },
        {
            "basicinfoCreditcode": null,
            "province": "河北",
            "provinceCode": "130000",
            "num": 0,
            "orgId": null,
            "orgNum": 0,
            "selfNum": 0,
            "noSelfNum": 0,
            "isSelf": 0
        },
        {
            "basicinfoCreditcode": null,
            "province": "冀北",
            "provinceCode": "130100",
            "num": 0,
            "orgId": null,
            "orgNum": 0,
            "selfNum": 0,
            "noSelfNum": 0,
            "isSelf": 0
        },
        {
            "basicinfoCreditcode": null,
            "province": "山西",
            "provinceCode": "140000",
            "num": 11,
            "orgId": null,
            "orgNum": 0,
            "selfNum": 0,
            "noSelfNum": 0,
            "isSelf": 0
        },
        {
            "basicinfoCreditcode": null,
            "province": "山东",
            "provinceCode": "370000",
            "num": 0,
            "orgId": null,
            "orgNum": 0,
            "selfNum": 0,
            "noSelfNum": 0,
            "isSelf": 0
        },
        {
            "basicinfoCreditcode": null,
            "province": "上海",
            "provinceCode": "310000",
            "num": 0,
            "orgId": null,
            "orgNum": 0,
            "selfNum": 0,
            "noSelfNum": 0,
            "isSelf": 1
        },
        {
            "basicinfoCreditcode": null,
            "province": "江苏",
            "provinceCode": "320000",
            "num": 0,
            "orgId": null,
            "orgNum": 0,
            "selfNum": 0,
            "noSelfNum": 0,
            "isSelf": 1
        },
        {
            "basicinfoCreditcode": null,
            "province": "浙江",
            "provinceCode": "330000",
            "num": 0,
            "orgId": null,
            "orgNum": 0,
            "selfNum": 0,
            "noSelfNum": 0,
            "isSelf": 1
        },
        {
            "basicinfoCreditcode": null,
            "province": "安徽",
            "provinceCode": "340000",
            "num": 0,
            "orgId": null,
            "orgNum": 0,
            "selfNum": 0,
            "noSelfNum": 0,
            "isSelf": 1
        },
        {
            "basicinfoCreditcode": null,
            "province": "福建",
            "provinceCode": "350000",
            "num": 0,
            "orgId": null,
            "orgNum": 0,
            "selfNum": 0,
            "noSelfNum": 0,
            "isSelf": 0
        },
        {
            "basicinfoCreditcode": null,
            "province": "湖北",
            "provinceCode": "420000",
            "num": 0,
            "orgId": null,
            "orgNum": 0,
            "selfNum": 0,
            "noSelfNum": 0,
            "isSelf": 0
        },
        {
            "basicinfoCreditcode": null,
            "province": "湖南",
            "provinceCode": "430000",
            "num": 0,
            "orgId": null,
            "orgNum": 0,
            "selfNum": 0,
            "noSelfNum": 0,
            "isSelf": 0
        },
        {
            "basicinfoCreditcode": null,
            "province": "河南",
            "provinceCode": "410000",
            "num": 0,
            "orgId": null,
            "orgNum": 0,
            "selfNum": 0,
            "noSelfNum": 0,
            "isSelf": 0
        },
        {
            "basicinfoCreditcode": null,
            "province": "江西",
            "provinceCode": "360000",
            "num": 0,
            "orgId": null,
            "orgNum": 0,
            "selfNum": 0,
            "noSelfNum": 0,
            "isSelf": 0
        },
        {
            "basicinfoCreditcode": null,
            "province": "四川",
            "provinceCode": "510000",
            "num": 0,
            "orgId": null,
            "orgNum": 0,
            "selfNum": 0,
            "noSelfNum": 0,
            "isSelf": 0
        },
        {
            "basicinfoCreditcode": null,
            "province": "重庆",
            "provinceCode": "500000",
            "num": 0,
            "orgId": null,
            "orgNum": 0,
            "selfNum": 0,
            "noSelfNum": 0,
            "isSelf": 0
        },
        {
            "basicinfoCreditcode": null,
            "province": "辽宁",
            "provinceCode": "210000",
            "num": 0,
            "orgId": null,
            "orgNum": 0,
            "selfNum": 0,
            "noSelfNum": 0,
            "isSelf": 0
        },
        {
            "basicinfoCreditcode": null,
            "province": "吉林",
            "provinceCode": "220000",
            "num": 0,
            "orgId": null,
            "orgNum": 0,
            "selfNum": 0,
            "noSelfNum": 0,
            "isSelf": 0
        },
        {
            "basicinfoCreditcode": null,
            "province": "黑龙江",
            "provinceCode": "230000",
            "num": 2,
            "orgId": null,
            "orgNum": 0,
            "selfNum": 0,
            "noSelfNum": 0,
            "isSelf": 0
        },
        {
            "basicinfoCreditcode": null,
            "province": "蒙东",
            "provinceCode": "150000",
            "num": 0,
            "orgId": null,
            "orgNum": 0,
            "selfNum": 0,
            "noSelfNum": 0,
            "isSelf": 0
        },
        {
            "basicinfoCreditcode": null,
            "province": "陕西",
            "provinceCode": "610000",
            "num": 10,
            "orgId": null,
            "orgNum": 0,
            "selfNum": 0,
            "noSelfNum": 0,
            "isSelf": 0
        },
        {
            "basicinfoCreditcode": null,
            "province": "甘肃",
            "provinceCode": "620000",
            "num": 2,
            "orgId": null,
            "orgNum": 0,
            "selfNum": 0,
            "noSelfNum": 0,
            "isSelf": 0
        },
        {
            "basicinfoCreditcode": null,
            "province": "青海",
            "provinceCode": "630000",
            "num": 279,
            "orgId": null,
            "orgNum": 0,
            "selfNum": 0,
            "noSelfNum": 0,
            "isSelf": 0
        },
        {
            "basicinfoCreditcode": null,
            "province": "宁夏",
            "provinceCode": "640000",
            "num": 0,
            "orgId": null,
            "orgNum": 0,
            "selfNum": 0,
            "noSelfNum": 0,
            "isSelf": 0
        },
        {
            "basicinfoCreditcode": null,
            "province": "新疆",
            "provinceCode": "650000",
            "num": 0,
            "orgId": null,
            "orgNum": 20,
            "selfNum": 0,
            "noSelfNum": 0,
            "isSelf": 0
        },
        {
            "basicinfoCreditcode": null,
            "province": "西藏",
            "provinceCode": "540000",
            "num": 10,
            "orgId": null,
            "orgNum": 0,
            "selfNum": 0,
            "noSelfNum": 0,
            "isSelf": 0
        }
    ]
    // 数据的isSelf == 0 关联图例1
    // 数据的isSelf == 1 关联图例2

    // 暂时加点假数据让柱子显示出来
    res.forEach((v, i) => {
        v['num'] = i + 1 * 100;
    })
    let xdataActive = [];
    let legends = ['leg1', 'leg2'];

    // 数据的province表示轴刻度名称
    let xdata = res.map((v) => {
        return {
            value: v.province,
            textStyle: {
                color: '#333'
            }
        }
    });
    const seriesFn = (dres) => {
        let newSeries = [];
        legends.map((vv, kk) => {
            let seriesItem = {
                data: [],
                barWidth: '20%',
                barGap: '-100%',
                name: vv,
                type: 'bar',
            }
            dres.map((item) => {
                let data_ = {
                    value: item.num,
                    itemStyle: { opacity: 1 },
                }
                if (item.isSelf == 0) {
                    if (vv == 'leg1')
                        data_.itemStyle.opacity = 1;
                    if (vv == 'leg2')
                        data_.itemStyle.opacity = 0;
                    seriesItem.data.push(data_)
                } else if (item.isSelf == 1) {
                    if (vv == 'leg1')
                        data_.itemStyle.opacity = 0;
                    if (vv == 'leg2')
                        data_.itemStyle.opacity = 1;
                    seriesItem.data.push(data_)
                }
            })
            newSeries.push(seriesItem)
        })
        return newSeries;
    }
    let series_ = seriesFn(res);
    console.log(series_, res)

    let option = {
        tooltip: {
            formatter(p) {
                let index_ = 0;
                xdata.map((v, k) => {
                    if (v.value == p.name) index_ = k;
                })
                let color1 = series_[0].data[index_].itemStyle.opacity;
                let color2 = series_[1].data[index_].itemStyle.opacity;
                if (color1) {
                    return `<span style='color:red'>${p.name}${p.value}</span>`
                }
                if (color2) {
                    return `<span style='color:blue'>${p.name}${p.value}</span>`
                }
            }
        },
        xAxis: {
            type: 'category',
            data: xdata,
            axisLabel: {
                formatter: function (val, index) {
                    // 因为滚动条的缘故 拖拽导致index不准所加
                    let index_ = 0;
                    xdata.filter((v, k) => {
                        if (v.value == val) index_ = k;
                    })
                    if (xdataActive.includes(val)) {
                        let color1 = series_[0].data[index_].itemStyle.opacity;
                        let color2 = series_[1].data[index_].itemStyle.opacity;
                        if (color1) {
                            return `{a|${val}}\n{c|}\n{b|}`;
                        }
                        if (color2) {
                            return `{a1|${val}}\n{c|}\n{b1|}`;
                        }
                    } else {
                        return val;
                    }
                },
                rich: {
                    a: {
                        color: 'red',
                    },
                    b: {
                        height: 2,
                        width: 20,
                        backgroundColor: 'red'
                    },
                    c: {
                        height: 2
                    },
                    a1: {
                        color: 'blue',
                    },
                    b1: {
                        height: 2,
                        width: 20,
                        backgroundColor: 'blue'
                    }
                }
            },
        },
        yAxis: {
            type: 'value'
        },
        legend: {
            data: legends
        },
        dataZoom: {
            show: true, // 为true 滚动条出现
            realtime: true,
            type: 'slider', // 有type这个属性，滚动条在最下面，也可以不行，写y：36，这表示距离顶端36px，一般就是在图上面。
            height: 10, // 表示滚动条的高度，也就是粗细
            start: 0, // 表示默认展示20%～80%这一段。
            end: 30
        },
        color: [
            {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                    offset: 0, color: '#ffa39e' // 0% 处的颜色
                }, {
                    offset: 1, color: '#f5222d' // 100% 处的颜色
                }],
                global: false // 缺省为 false
            },
            {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                    offset: 0, color: '#91d5ff' // 0% 处的颜色
                }, {
                    offset: 1, color: '#1890ff' // 100% 处的颜色
                }],
                global: false // 缺省为 false
            }
        ],
        series: series_,
    };
    myChart.setOption(option)

    myChart.on('click', (e) => {
        // 判断 data上有没有tooltip：{show：false} 如果有禁止设置高亮

        if (e.data.tooltip && !e.data.tooltip.show) return;
        if (!xdataActive.includes(e.name)) {
            xdataActive.length = 0;  //只要一个高亮
            xdataActive.push(e.name);
        }
        console.log(xdataActive);
        myChart.setOption(
            {
                xAxis: {
                    data: xdata,
                }
            }
        );
    })

    myChart.on('legendselectchanged', (e) => {
        let selected_ = e.selected;
        let series_clone = JSON.parse(JSON.stringify(series_));
        // 克隆一下数据

        series_clone.forEach((v) => {
            // 选中的数据判断
            if (selected_[v.name]) {
                v.data.map(vv => {
                    // 如果是隐藏的禁止tooltip
                    if (vv.itemStyle.opacity == 0) {
                        vv['tooltip'] = { show: false }
                        vv['value'] = 0; //数值为0 是不显示主子的也可以隐藏
                    }
                })
            }
        })
        myChart.setOption({ series: series_clone })
    })
}
onMounted(() => {
    initChart();
})
</script>

<style scoped>
.chart {
    width: 1000px;
    height: 600px;
}
</style>